<template>
	<view class="wrap">
		 <view class="tabs-list">
		 	<u-tabs :list="tablist" :is-scroll="false" height="100" :bold="false" font-size="30" bar-height="2" bar-width="365" :current="current" @change="tabchange"></u-tabs>
		 </view>
		 <view class="" style="margin-top: 100rpx;">
		 	<u-gap height="20" bg-color="#F8F8F7"></u-gap>
		 </view>
		 <!-- 未审核 -->
		 <view class="content" v-if="current == 0">
		 	  <view class="search">
		 	   	  <u-search height="70" color="#B9B9B9" :action-style="{'color':'#4961EE'}" bg-color="#F0F0F0" margin="15rpx 40rpx 12rpx" search-icon-color="#B9B9B9" placeholder-color="#B9B9B9" placeholder="请输入您所查询的学生"  v-model="keyword" @search="studentList(current+1)" @custom="studentList(current+1)" :show-action="true"></u-search>
				  <view class="search-con" >
					<view class="search-con-l">
						<u-checkbox size="30" v-model="allChecked" style=" width: 50rpx;overflow: hidden;position: relative;top: -4rpx;" @change="allCheckedchange" shape="circle"></u-checkbox>全选
					</view>
					<view class="search-con-zhong" v-if="gradeval" @click="banjifenpeishow">
						分配班级
					</view>
					<view class="search-con-r" @click="gradeshow = true " >
						<text style="margin-right: 10rpx;">班级选择</text>	  
						<u-icon label="" size="20" color="#4961EE" name="arrow-down-fill" ></u-icon>
					</view>
				  </view>
			  </view>
			  
			  <view class="con-li" v-for="(item,index) in students" :key="index">
					<u-checkbox @change="danxuanStu" size="30" style="width: 50rpx;overflow: hidden;"  :name="index" v-model="item.selected"  shape="circle"></u-checkbox>
					<view class="con-li-content">
						<view class="con-title">
							<view class="stu-title">
								{{item.nianji_name}}{{item.banji_name}}{{item.student_name}}
							</view>
							<view class="stu-time" >
								{{item.create_time}}
							</view>
						</view>
						<view class="stu-fuwu">
							报名服务：{{item.eat}}
						</view>
						<view class="stu-fuwu" v-if="item.order">
							服务期限：{{item.order.start_time}}-{{item.order.end_time}}
						</view>
					</view>
			  </view>
		 </view>
		 <!-- 已审核 -->
		 <view class="content" v-if="current == 1">
		     	<view class="search">
		 	 	   <u-search height="70" color="#B9B9B9" :action-style="{'color':'#4961EE'}" bg-color="#F0F0F0" margin="15rpx 40rpx 12rpx" search-icon-color="#B9B9B9" placeholder-color="#B9B9B9" placeholder="请输入您所查询的学生" v-model="keyword" @search="studentList(current+1)" @custom="studentList(current+1)" :show-action="true"></u-search>
		    	</view>
				<view class="con-li" v-for="(item,index) in students_yi" :key="index">
						<!-- <u-checkbox  name="全选"  shape="circle"></u-checkbox> -->
						<view class="con-li-content">
							<view class="con-title">
								<view class="stu-title">
									{{item.nianji_name}}{{item.banji_name}}{{item.student_name}}
								</view>
								<view class="stu-time">
									{{item.create_time}}
								</view>
							</view>
							<view class="stu-fuwu">
								报名服务：{{item.eat}}
							</view>
							<view class="stu-fuwu">
								服务期限：{{item.order.start_time}}-{{item.order.end_time}}
							</view>
						</view>
				</view>
		</view>		 
		 
		 <view style="margin-top: 300rpx;" class="" v-if="(current == 0 && students.length==0) || (current == 1 && students_yi.length==0)">
		 	<u-empty text="" mode="data" ></u-empty>
		 </view>
	    
		 
		 <!-- 内部班级列表 -->
		<u-popup v-model="banjishow" mode="center" border-radius="19"  :closeable="false"  width="90%" height="620">
			<view class="neibubanjiList">
				<view :class="{'neibu-li':true,'hover':neibuselected === index}" v-for="(item, index) in neibubanjilist" :key="index" @click="neibubanjiselect(index)">
					{{item.banji_name}}
				</view>
			</view>
		</u-popup>
		 <view class="fenpeibutton" v-if="banjishow" @click="fenpeitijiao">
			提交
		 </view>
		 
		 
		 <u-popup v-model="gradeshow" mode="bottom" border-radius="19"  :closeable="false"  width="100%" height="994">
		 	<view style="overflow: hidden;position: relative;">
				<view class="b-title">
					班级选择
				</view>
				<view class="b-stu">
					<view class="b-stu-l">
						<u-radio-group v-model="gradeval" @change="graderadioGroupChange">
						   <view  :class="{'b-grade':true,'hover':(item.id === gradeval) || (index == 0 && gradeval== 0)  }" v-for="(item,index) in nianjiList" :key="index">
							    <text style="padding-right: 30rpx;">{{item.nianji_name}}</text> 
								<u-radio :name="item.id"  shape="square"  active-color="#4961EE" style="width: 40rpx;"></u-radio>
						   </view>
					    </u-radio-group>
					</view>
					<view class="b-stu-r">
						<view class="br-top">
							<view class="br-top-title">
							   {{select_nianjiname}}
							</view>
							<view class="br-top-radio">
								<u-checkbox  v-model="checkbox_niaji"  @change="checkbox_niajichange"></u-checkbox>
							</view>
						</view>
						<view class="br-body">
							<view class="br-content">
								 <view :class="{'br-content-li':true,'hover':item.selected==true }" v-if="" v-for="(item,index) in banjiList" :key="index" @click="selectBanji(index)">
								 	{{item.banji_name}}
								 </view>
							</view>
						</view>
						<view class="br-sure">
							<view class="br-reset" @click="resetStu">
								重置
							</view>
							<view class="br-que" @click="searchStu">
								确定
							</view>
						</view>
					</view>
				</view>
			</view>
		 </u-popup>	
	</view>
</template>

<script>
	export default {		
		components:{
		},
		data() {
			return {
				tablist: [{
						name: '待审核'
					  }, {
						name: '已审核'
					  }],
				current: 0,
				allChecked:false, //全选
				baseurl:'',
				keyword:"",//搜索
				keywordgrade:"",
				gradeshow:false,
				gradeval:0,
				nianjiList:[],
				banjiList:[],
				students:[],
				students_yi:[],
				banji_ids:"",
				nianji_id:1,
				select_nianjiname:"一年级",
				checkbox_niaji:false ,//全选年级
				banjishow:false,  //内部班级弹出框
				neibubanjilist:[], //内部班级列表
				neibuselected:'', //内部班级选中的
			}
		},
		onLoad() {
			    this.baseurl =  this.$u.http.config.baseUrl
			    this.studentList(1);//未审核
				this.studentList(2);//已审核
				this.studentGradeBanji();
				//this.graderadioGroupChange(1)
		},
		onReady() {
			
		},
		methods: {
			//复选框
			danxuanStu(e){
				this.students[e.name].selected = e.value
				this.$forceUpdate()
			},
			//分配班级
			fenpeitijiao(){
				
				//alert(this.neibuselected);
				let neibuselected = this.neibuselected
				if(neibuselected === ""){
					this.$u.toast("请选择班级");
					return false;
				}
				let banji_id = this.neibubanjilist[neibuselected].id
				
				//学生
				let xuesheng = [];
				this.students.forEach(function(item,index){
					if(item.selected){
						xuesheng.push(item.id);
					}
				})
				if(xuesheng.length == 0){
					this.$u.toast("请选择学生");
					return false;
				}
				
				this.$u.post('/api/school/fenpeiBanjiStu', {
						 banji_id,
						 stu_id:xuesheng.join(",")
						}).then(res => {
						this.$u.toast("成功");	
						this.banjishow  = false;
						this.studentList(1)
						this.studentList(2)
						
				});	
			},
			allCheckedchange(e){
				let value = e.value
				let current = this.current
				if(current == 0){
					this.students.map(val => {
					   val.selected = value
					})
				}
			},
			//重置
			resetStu(){
				// 班级选择取消
				//this.checkbox_niajichange({value:false})
				//年级选择取消
				//this.$router.go(0)
				this.banjiList.map((val)=>{
				   val.selected = false
				})
				this.gradeval = 0;
				this.searchStu()
			},
			//选择内部班级
			neibubanjiselect(index){
				this.neibuselected = index;
			},
			//班级分配
			banjifenpeishow(){
				if(!this.gradeval){
					this.$u.toast("请选择年级");
					return false;
				}
				
				let nianji_id = this.gradeval
				this.$u.post('/api/school/gradeBanjiList', {
						 nianji_id
						}).then(res => {
							this.neibubanjilist = res.nianjiList
							if(this.neibubanjilist.length == 0){
								this.$u.toast("没有内部班级");
								return false;
							}
							this.banjishow = true
				});	
			},
			//学生搜索
			searchStu(){				
				//this.nianji_id = this.gradeval 
				let banji_ids = [];
				this.banjiList.forEach(function(item,indwex){
					if(item.selected){
						banji_ids.push(item.id);
					}
				})
				this.banji_ids = banji_ids.join(",");
				this.studentList(1)
				this.gradeshow = false;
			},
			//班级列表顶部的 年级选中
			checkbox_niajichange(e){
				let checkbox_niaji = e.value;
				this.checkbox_niaji = checkbox_niaji;
				this.banjiList.map(val => {
				   val.selected = checkbox_niaji;
		     	})
			},
			//班级选中
			selectBanji(index){
				let item = this.banjiList[index]
				if(item.selected){
					item.selected = !item.selected;
				}else{
					item.selected = true;
				}
				this.banjiList[index] = item;
				this.$forceUpdate()
				console.log(this.banjiList[index]);
			},
			//年级选择
			graderadioGroupChange(e) {
						//let item = this.nianjiList[e]
						let that = this;
						//班级取消选中
						if(e != this.nianji_id){
							this.banjiList.map((item)=>{
								item.selected = false
							})
						}
					
						this.gradeval = e;
						this.nianji_id = e
						this.nianjiList.forEach(function(item,index){
							if(item.id == e){
								that.select_nianjiname = item.nianji_name
							}
						})
						
						
						
						this.studentList(1);
						//console.log(that.select_nianjiname);
						//this.select_nianjiname = item.nianji_name;
			},
			tabchange(index){
				this.current = index
			},
			//待审核 和 已审核
			studentList(index = 1){
					let current = index;
					let banji_ids = ""
					let nianji_id = ""
					if(index == 1){ //已审核
						 banji_ids = this.banji_ids
						 nianji_id = this.gradeval
					}
					this.$u.post('/api/school/studentList', {
						     type:current,
							 banji_ids,
							 nianji_id,
							 stu_name:this.keyword
							}).then(res => {
						   if(index == 1){
							   this.students = res.stuList;
						   }else{
							   this.students_yi = res.stuList;
						   }
						    			
					});	
			},

			studentGradeBanji(){
			    	this.$u.post('/api/school/studentGradeBanji', {
			    			}).then(res => {
			    		     this.nianjiList = res.nianji
							 //console.log( this.nianjiList);
							 this.banjiList = res.banji
							// this.neibubanjilist = res.neibubanjilist
			    	});	
			},
			submitbanji(){
				let banji = this.banji;
				if(banji.id){ 
					//修改老师
					if(!banji.user_ids){
						this.$u.toast("请选择老师");
						return false;
					}
					
					//修改
					this.$u.post('/api/school/schoolBanjiUpdate', {
						banji:this.banji
							}).then(res => {
						     		this.$u.toast("成功");
					});	
					
				}else{
					if(!banji.nianji_name){
						this.$u.toast("请选择年级");
						return false;
					}
					if(!banji.banji_name){
						this.$u.toast("请填写班级名称");
						return false;
					}
					
					//添加
					this.$u.post('/api/school/schoolBanjiAdd', {
						banji:this.banji
							}).then(res => {
						     		this.$u.toast("成功");
					});	
				}
				//
		
				
			},
			//老师选择
			teacherselectConfirm(index) {
				let item = this.teacherlist[index];
				this.banji.realname = item.realname
				this.banji.user_ids = item.id
				this.teachershow = false
			},
			feipeiTeacher(index){
				let banjiindex = this.banjiList[index];
				this.banji = banjiindex
				this.showbanji = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
  .wrap {
	overflow: hidden;
	.tabs-list{
		position: fixed;
		z-index: 10;
		width: 100%;
		left: 0;
		right: 0;
	}	
  }

.content{
	background-color: #fff;
	// margin-top: 120rpx;
	.search{
		margin-top: 20rpx;
		margin-bottom: 0rpx;
		background-color: #fff;
		overflow: hidden;
		.search-con{
			display: flex;
			justify-content: space-between;
			margin: 0 40rpx;
			height: 86rpx;
			align-items: center;
			border-top: 2rpx solid #F1F1F1;
			border-bottom: 2rpx solid #F1F1F1;
			.search-con-r{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}	
		}
	}
	.con-li{
		display: flex;
		align-items: center;
		margin: 0 40rpx;
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid #F1F1F1;
		.con-title{
			display: flex;
			margin-top: 39rpx;
			.stu-title{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				//padding-right: 50rpx;
				width: 300rpx;
                
			}
			.stu-time{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BEBEBE;
				flex-shrink: 0;
			}
		}
		.stu-fuwu{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 31rpx;
		}

	}
}
  
 
 .b-title{
	 height: 88rpx;
	 background: #F9F9F9;
	 text-align: center;
	 line-height: 88rpx;
	 font-size: 28rpx;
	 font-family: PingFang SC;
	 font-weight: 500;
	 color: #000000;
 }
 .b-stu{
	 display: flex;
	 height: 900rpx;
	 .b-stu-l{
		 width: 210rpx;
		 height: 100%;
		 background-color: #F7F6FB;
		 flex-shrink: 0;
		 .b-grade{
			 height: 96rpx;
			 text-align: center;
			 line-height: 96rpx;
			 width: 100%;
		 }
		 .b-grade.hover{
			 background-color: #fff;
		 }
	 }
	 .b-stu-r{
		 flex-grow: 1;
	 }
 } 
 .br-top{
	 margin: 43rpx 30rpx 22rpx 50rpx;
	 display: flex;
	 justify-content: space-between;
 }
 .br-body{
	 max-height: 640rpx;
	 overflow-y:scroll;
 }
 .br-content{
	 display: flex;
	 flex-wrap: wrap;
	 margin-top: 10rpx;
	 .br-content-li{
		 padding: 25rpx 50rpx;
		 background: #F8F8F8;
		 border-radius: 20rpx;
		 margin-left: 50rpx;
		 margin-bottom: 20rpx;
		 font-size: 28rpx;
		 min-width:184rpx;
		 text-align: center;
	 }
	 .br-content-li.hover{
		 background: #E2E6FF;
		 color: #4961EE;
	 }
 }
 
 .br-sure{
	 display: flex;
	 justify-content: flex-end;
	 position: absolute;
	 bottom:40rpx;
	 right:40rpx;
	 .br-reset{
		 width: 186rpx;
		 height: 74rpx;
		 background: #94A3FC;
		 border-radius: 37rpx 0px 0px 37rpx;
		 line-height: 74rpx;
		 text-align: center;
		 font-size: 32rpx;
		 font-family: PingFang SC;
		 font-weight: 400;
		 color: #FFFFFF;
	 }
	 .br-que{
	 		 width: 186rpx;
	 		 height: 74rpx;
	 		 background: #4961EE;
	 		 border-radius: 0px 37px 37px 0px;
	 		 line-height: 74rpx;
	 		 text-align: center;
	 		 font-size: 32rpx;
	 		 font-family: PingFang SC;
	 		 font-weight: 400;
	 		 color: #FFFFFF;
	 }
 }
 
 .neibubanjiList{
	 display: flex;
	 flex-wrap: wrap;
	 overflow: hidden;
	 padding-top: 40rpx;
 }
 .neibu-li{
	 width: 160rpx;
	 height: 60rpx;
	 line-height: 60rpx;
	 background: #EBEBEB;
	 border-radius: 4rpx;
	 text-align: center;
	 font-size: 26rpx;
	 font-family: PingFang SC;
	 font-weight: 400;
	 color: #333333;
	 margin: 0 32rpx 40rpx;
 }
 .neibu-li.hover{
	 background: #4961EE;
	 color: #fff;
 }
 .fenpeibutton{
	 width: 600rpx;
	 height: 80rpx;
	 line-height: 80rpx;
	 background: #4961EE;
	 border-radius: 40rpx;
	 color: #fff;
	 text-align: center;
	 font-size: 30rpx;
	 font-weight: 500;
	 position: fixed;
	 margin-left: 76rpx;
	 bottom: 114rpx;
	 z-index: 99999;
 }
</style>
